<template>
    <div class="pages index">
      <header>
        <div class="grids">
          <a href="javascript:;" class="grid" :class="{'crt': taxType==3}" @click='checkTaxtype(3)'>不需要发票</a>
          <a href="javascript:;" class="grid" :class="{'crt': taxType==4}" @click='checkTaxtype(4)'>增值税普通发票(电子)</a>
          <a href="javascript:;" class="grid" :class="{'crt': taxType==1}" @click='checkTaxtype(1)'>增值税普通发票(纸质)</a>
          <a href="javascript:;" class="grid" :class="{'crt': taxType==2}" @click='checkTaxtype(2)'>增值税专用发票</a>
        </div>
      </header>
      <div class="content" v-if="taxType == 3|| taxType ==4">
        <div  style='text-align:center;margin-top:10px;'>
          暂时木有呢……
        </div>
      </div>
      <div class="content" v-if="taxType == 1|| taxType ==2">
        <group class="nuim-cells">
          <x-input title="发票金额" placeholder="请输入发票金额" :value="'￥'+form.money" disabled></x-input>
          <div class="nuim-cell nuim-cell_right" >
            <div class="nuim-cell-hd">
              <label>发票项目</label>
            </div>
            <div class="nuim-cell-bd" @click='action.project.title_tp = !action.project.title_tp'>
              <span class="selTime">{{action.project.title_type}}</span>
            </div>
            <div class="nuim-cell-ft"></div>
          </div>
          <div class="weui-cell needBz">
            <div class="weui-cell__hd">
              <p> 需要备注酒店名称及日期</p>
              <div class="hotelinfo" v-if="check">
                <p>{{form.hotel.name}}</p>
                <p>入住：{{form.hotel.Stime}}  离店：{{form.hotel.Etime}}  {{form.hotel.total}}晚</p>
              </div>
            </div>
            <div class="weui-cell__ft">
              <input type="checkbox" class="checkIpt" v-model="check">
              <div class="checkD"></div>
            </div> 
            
          </div>
        </group>
        <group class="nuim-cells s9999">
          <div class="nuim-cell nuim-cell_right" v-if="taxType==1">
            <div class="nuim-cell-hd">
              <label>抬头类型</label>
            </div>
            <div class="nuim-cell-bd" @click='action.title.title_tp = !action.title.title_tp'>
              <span class="selTime" >{{action.title.title_type}}</span>
            </div>
            <div class="nuim-cell-ft"></div>
          </div>
          <div class="nuim-cell">
            <div class="nuim-cell-hd">
              <label>发票抬头</label>
            </div>
            <div class="nuim-cell-bd">
              <input type="text" class="weui-input" placeholder="请输入发票抬头"  maxlength="35" @input="inputTitle" v-model="form.comInfo.kpName" />
            </div>
            <div class="nuim-cell-ft"></div>
          </div>
          <div class="nuim-cells titleInput" v-if="goodsList">
            <div class="nuim-cell" v-for="goods in goodsList" :key="goods.index" @click='searchNew(goods.c_code,goods.validator,goods.signid)'>
              <div class="nuim-cell-bd searchText">
                {{goods.c_kpname}}
              </div>
            </div>
            <!-- <div class="nuim-cell">
              <div class="nuim-cell-bd searchText" @click="clickPushTit">
                确认抬头“<span style='color: #EE9900;' >{{form.comInfo.kpName}}</span>”
              </div>
            </div> -->
          </div>
          <!-- {{this.action.title.title_type_no}} -->
          <x-input v-if="action.title.title_type_no==1" title="公司税号" placeholder='请输入公司税号' :max='20' v-model="form.comInfo.kpCode"></x-input>
          <div class="taxtype" v-if="taxType==1">
          </div>
          <div class="taxtype" v-if="taxType==2">
          <x-input title="注册地址" placeholder='请输入注册地址' :max='60' v-model="form.comInfo.kpAddr"></x-input>
          <x-input title="注册电话" placeholder='请输入注册电话' :max='20' v-model="form.comInfo.kpTel"></x-input>
          <x-input title="开户银行" placeholder='请输入开户银行' :max='40' v-model="form.comInfo.accountBlank"></x-input>
          <x-input title="开户账户" placeholder='请输入开户账户' :max='25' v-model="form.comInfo.bankAccount"></x-input>
          </div>
        </group>
        <group class="nuim-cells">
          <div class="nuim-cell nuim-cell_right" >
            <div class="nuim-cell-hd">
              <label>领取时间</label>
            </div>
            <div class="nuim-cell-bd" @click='action.time.title_tp = !action.time.title_tp'>
              <span class="selTime" >{{action.time.title_type}}</span>
            </div>
            <div class="nuim-cell-ft"></div>
          </div>
        </group>
        <div class="nuim-btn-area">
          <a class="nuim-btn" :class="{'nuim-btn-disabled':disabled}" @click="clickBtn">确认，下一步</a>
        </div>
        <div class="tips">
          <li>• 发票由酒店开具，您可根据领取时间，在前台直接领取发票</li>
        </div>
      </div>
      <actionsheetfy title='选择抬头类型' v-model="action.title.title_tp" :menus="TTType" :id='action.title.title_type_no' @on-click-menu="ttClick" ></actionsheetfy>
      <actionsheetfy title='选择发票项目' v-model="action.project.title_tp" :menus="PrType" :id='action.project.title_type_no' @on-click-menu="prClick" ></actionsheetfy>
      <actionsheetfy title='领取时间' v-model="action.time.title_tp" :menus="Lqtime" :id='action.time.title_type_no' @on-click-menu="timeClick" ></actionsheetfy>
      <notefy v-model='display' @on-display='onDisplay'></notefy>  

    </div>
</template>
<script>
import { XInput, Group ,Cell} from 'vux'
import Actionsheetfy from '@/components/actionsheetfy';
import Notefy from '@/components/note';
import store from 'storejs';
import { nowTime,getData,getdaxiao,days,getMD} from '@/utils/time'
import qs from 'Qs'
export default {
  name: 'index',
  components: {
    Group,
    Cell,
    XInput,
    Actionsheetfy,
    Notefy
  },
  data () {
    return {
      check:false,
      taxType:'1',
      display:false,
      sellName:this.$route.query.sellName ||'',
      secrt:this.$route.query.secrt ||'',
      remark:'',
      action:{
        title:{
          title_tp:false,
          title_type_no:1,
          title_type:'单位'
        },
        project:{
          title_tp:false,
          title_type_no:1,
          title_type:''
        },
        time:{
          title_tp:false,
          title_type_no:1,
          title_type:''
        }
      },
      form:{
        money:'0',
        comInfo:{
          "kpAddr":"",
          "kpCode":"",
          "kpTel":"",
          "accountBlank":"",
          "kpName":"",
          "code":"",
          "bankAccount":"",
        },
        hotel:{
          name:'',
          Stime:'',
          Etime:'',
          total:'',
          orderId:'',
          shopId:''
        }
      },
      TTType:[
        {id:1,name: '单位'},
        {id:2,name: '政府机关行政单位'},
        {id:3,name: '个人'}
      ],
      PrType:[
        {id:1,name: '住宿费'},
        {id:7,name: '车马费'},
        {id:2,name: '餐饮费'},
        {id:3,name: '餐饮费1'},
        {id:4,name: '餐饮费2'},
        {id:5,name: '餐饮费3'},
        {id:6,name: '招待费'}
      ],
      Lqtime:[
        {id:1,name: '00:00-03:00'},
        {id:2,name: '03:00-06:00'},
        {id:3,name: '06:00-09:00'},
        {id:4,name: '09:00-12:00'},
        {id:5,name: '12:00以后'}
      ],
      goodsList:''

    }
  },
  created(){
    // 显示
    this.$vux.loading.show({
      text: '数据获取中'
    })
    //选择时间
    var that = this;
    function timeC(){
      var key = nowTime();
      for(var i=0;i<that.Lqtime.length;i++){
        if(that.Lqtime[i].name){
          that.Lqtime[i].name = that.form.hotel.Etime+' '+that.Lqtime[i].name;
        }
      }
      if(getdaxiao(that.form.hotel.Etime)=='da'){
        that.action.time.title_type_no = 0;
        that.action.time.title_type = that.Lqtime[0].name;
        // console.log('*************')
      }else{
        that.action.time.title_type_no = key;
        that.action.time.title_type = that.Lqtime[key-1].name
      }
      
    }
    this.$http.post(server.index().getDetailInfo,qs.stringify({secrt: this.secrt})).then((response) => {
          var datas = response.data;
          // console.log(datas);
          this.id = datas.id;
          this.form.money = datas.invoiceAmount;
          this.remark = datas.remark;
          this.form.hotel.name = this.sellName
          this.form.hotel.Stime = getMD(datas.enterDate)[0]+'月'+getMD(datas.enterDate)[1]+"日";
          this.form.hotel.Etime = getMD(datas.leaveDate)[0]+'月'+getMD(datas.leaveDate)[1]+"日";
          this.form.hotel.total =  Math.floor(days(datas.leaveDate,datas.enterDate));
          this.form.hotel.orderId= datas.orderId;
          this.form.hotel.shopId= datas.shopId;
          this.PrType = eval(datas.invoiceItem);
          this.action.project.title_type= datas.invoiceItemIndex || this.PrType[0].name;
          //设置发票项目ID
          for(let i = 0;i<this.PrType.length;i++){
            if(this.PrType[i].name ==datas.invoiceItemIndex ){
              this.action.project.title_type_no = Number(i)+1;
            }
          }
          //选择时间
          timeC();
          //console.log(datas)
          this.form.comInfo.kpName= datas.companyTitle;
          if(datas.addedInfo){
            this.form.comInfo.kpAddr = datas.addedInfo.registerAddr;
            this.form.comInfo.kpCode = datas.addedInfo.taxNo;
            this.form.comInfo.kpTel = datas.addedInfo.tel;
            this.form.comInfo.accountBlank = datas.addedInfo.openingBank;
            this.form.comInfo.bankAccount = datas.addedInfo.accountNo;
          }
          

          // 隐藏
          this.$vux.loading.hide()
        }, (response) => {
          this.$vux.toast.show({
            type:'text',
            width:'70%',
            text: '信息获取失败'
          })
        });
    
  },
  computed:{
    disabled(){
      if(this.taxType==2){
        return (this.form.comInfo.kpName=='') 
        || (this.form.comInfo.kpCode=='') 
        || (this.form.comInfo.kpTel=='') 
        || (this.form.comInfo.accountBlank=='') 
        || (this.form.comInfo.bankAccount=='') 
        || (this.form.comInfo.kpAddr=='')?true:false;
      }else{
        return (this.form.comInfo.kpName=='') || (this.form.comInfo.kpCode=='') ?true:false;
      }
    }
  },
  methods:{
    onDisplay(val){
      this.display=val;
    },
    showNote(){
      this.display=!this.display;
    },
    checkTaxtype:function(e){
      this.taxType = e;
      // console.log(e)
    },
    ttClick:function(key){
      // console.log(key);
      this.action.title.title_type_no = key;
      this.action.title.title_type = this.TTType[key-1].name;
      //console.log(key)
    },
    prClick:function(key){
      // console.log(key);
      this.action.project.title_type_no = key;
      this.action.project.title_type = this.PrType[key-1].name
    },
    timeClick:function(key){
      var res = nowTime()
      var dax = getdaxiao(this.form.hotel.Etime)
      // console.log(dax);
      if(dax == 'deng'){
        if(key<res){
          this.$vux.toast.show({
            type:'text',
            width:'70%',
            text: '你不能选择之前的时间'
          })
          return false;
        }else{
          this.action.time.title_type_no = key;
          this.action.time.title_type = this.Lqtime[key-1].name
        }
      }else if(dax == 'da'){
        this.action.time.title_type_no = key;
        this.action.time.title_type = this.Lqtime[key-1].name
      }else{
         this.$vux.toast.show({
            type:'text',
            width:'70%',
            text: '信息过期了 '
          })
          return false;
      }
    },
    searchNew(val,validator,signid){
      // console.log(val,validator,signid);
      this.$http.post(server.index().findTzUserinfoForRequestkp,qs.stringify({code: val,validator:validator,signid:signid})).then((response) => {
        var datas = response.data;
        if(datas){
          this.goodsList = '';
          this.form.comInfo.kpName=datas.kpName;
          this.form.comInfo.kpCode=datas.kpCode;
          this.form.comInfo.kpAddr=datas.kpAddr;
          this.form.comInfo.kpTel=datas.kpTel;
          this.form.comInfo.accountBlank=datas.accountBlank;
          this.form.comInfo.bankAccount=datas.bankAccount;
          this.form.comInfo.code=datas.code;
        }
      }, (response) => {
        this.$vux.toast.show({
          type:'text',
          width:'70%',
          text: '信息获取失败'
        })
      });

    },
    clickPushTit(){
			this.goodsList ='';
    },
    inputTitle(){
      if(this.form.comInfo.kpName){
				this.$http.post(server.index().findInvoiceMake, qs.stringify({paramName: this.form.comInfo.kpName,source:"6",counter:'1'})).then((response) => {
					var datas = response.data;
					if(datas &&datas.list instanceof Array){
						this.goodsList = datas.list;
					}else{
						this.goodsList='';
					}
				}, (response) => {
					this.$vux.toast.show({
						type:'text',
						width:'70%',
						text: '信息获取失败'
					})
				});
			}else{
					this.goodsList='';
      }
    },
    clickBtn:function(){
      
      if(!this.disabled){
        // 显示
        this.$vux.loading.show({
          text: '数据提交中'
        })
        var common_tax_reg = /^[a-zA-Z0-9]{15,20}$/;
				if(this.form.comInfo.kpCode &&!common_tax_reg.test(this.form.comInfo.kpCode)){
					this.$vux.toast.show({
						type:'text',
						width:'70%',
						text: '请输入正确的税号'
					});
					return false;
				}else{
          //提交
          var modelJsonString = {"accDate":this.action.time.title_type,"addedInfo":{"accountNo":this.form.comInfo.bankAccount,"openingBank":this.form.comInfo.accountBlank,"registerAddr":this.form.comInfo.kpAddr,
"taxNo":this.form.comInfo.kpCode,"tel":this.form.comInfo.kpTel},"companyTitle":this.form.comInfo.kpName,"id":this.id,"invoiceAmount":this.form.money,"invoiceItemIndex":this.action.project.title_type ,"invoiceType":this.taxType,"remark":this.remark ,"titleType":this.action.title.title_type_no}
          store({'oldData':modelJsonString });
          var ids = '';
          if(this.id!=''){
            ids = this.id
          }
          this.$http.post(server.index().submitInvoicInfo, qs.stringify({modelJsonString: JSON.stringify(modelJsonString),secrt:this.secrt})).then((response) => {
          var datas = response.data;
          //console.log(datas)
					if(datas.code=='S0000'){
            console.log('提交了');
            this.$router.push({path:'/details?secrt='+ this.secrt});
            var details = {'sellName':this.sellName,'secrt':this.secrt}
            store({'details':details});
          }else{
            this.$vux.toast.show({
              type:'text',
              width:'70%',
              text: datas.describe
            })
          }
          // 隐藏
          this.$vux.loading.hide()
				}, (response) => {
					this.$vux.toast.show({
						type:'text',
						width:'70%',
						text: '提交失败'
          })
          // 隐藏
          this.$vux.loading.hide()
				});
        }
      }else{
        this.$vux.toast.show({
          type:'text',
          width:'70%',
          text: '请完善开票信息'
        });
      }
      
    }
  }
}
</script>

<style scoped lang="less">
.grids{
    background: #fff;
    position: relative;
    overflow: hidden;
    padding: 15px 10px 10px;
    .grid{
      &:nth-child(2n-1){
        margin-right: 2%;
      }
      margin-bottom: 5px;
      position: relative;
      float: left;
      width: 49%;
      text-align: center;
      line-height: 45px;
      box-sizing: border-box;
      border: 1px solid #06C1AE;
      border-radius: 2px;
      font-size: 14px;
      color: #666666;
    }
    .grid.crt{
      color: #FFFFFF;
      background: #06C1AE;
    }
}
.nuim-cells{
	position: relative;
	font-size: 12px;
	color:#B5B5B5;
	&:before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    color: #d9d9d9;
		top: 0;
    border-top: 1px solid #d9d9d9;
    transform-origin: 0 0;
    transform: scaleY(.5);
    }
	&:after {
		content: " ";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    color: #d9d9d9;
    bottom: 0;
    border-bottom: 1px solid #d9d9d9;
    transform-origin: 0 100%;
    transform: scaleY(.5);
	}
	.nuim-cell{
		padding: 10px 15px;
    position: relative;
		&:before {
			content: " ";
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			height: 1px;
			border-top: 1px solid #d9d9d9;
			color: #d9d9d9;
			transform-origin: 0 0;
			transform: scaleY(.5);
			left: 0px;
    }
    &:first-child {
        &:before {
            display: none;
        }
    }
	}
}
.s9999 .weui-cells{
  overflow: unset
}
.taxtype{
  position: relative;
  &:before{
    content: " ";
    position: absolute;
    left: 0;
			top: 0;
			right: 0;
			height: 1px;
			border-top: 1px solid #d9d9d9;
			color: #d9d9d9;
			transform-origin: 0 0;
			transform: scaleY(.5);
			left: 0px;
  }
   
}
.titleInput{
  position: absolute;
    top: 89px;
    background: #fff;
    z-index: 11;
    width: 95%;
    margin-left: 2.5%;
    border: 1px solid #e5e5e5;
    border-radius: 0 0 5px;
    border-top: 0;
    .nuim-cell{
      &:before{
        left:0;
      }
    }
}
.needBz{
  .weui-cell__hd{
    color: #999999;
    font-size: 14px;
    flex: 1;
  }
  .weui-cell__ft{
    position: relative;
    .checkIpt{
      opacity: 0;
      position: absolute;
      right: -5px;
      top: -5px;
      width: 30px;
      height: 30px;
    }
    .checkIpt:checked + .checkD{
      background: url('./../../assets/images/checks.png') no-repeat;
      background-size:contain; 
      border: none 0;
    }
  }
  .checkD{
    border: 1px solid #979797;
    border-radius: 2px;
    box-sizing: border-box;
    height: 20px;
    width: 20px;

  }
}
.nuim-cells{
  font-size: 14px;
  color:#B6B6B6;
  .nuim-cell{
    padding: 10px 15px;
    position: relative;
    color: #9A9A9A;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    .nuim-cell-hd{
      label{
        display: block;
        width: 5em;
        font-size: 14px;
        text-align: left;
        word-wrap: break-word;
        word-break: break-all;
        line-height: 24px;
      }
    }
    .nuim-cell-bd{
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      font-size: 14px;
      .selTime{
        font-size: 14px;
        color: #333333;
        line-height: 1.7;
      }
    }
    .nuim-cell-bd.searchText{
      color:#333;
    }
    .nuim-cell-ft{
      text-align: right;
      color: #999999;
    }

  }
  .nuim-cell_right{
    .nuim-cell-ft {
      text-align: right;
      color: #999999;
      padding-right: 13px;
      position: relative;
        &:after {
          content: " ";
          display: inline-block;
          height: 6px;
          width: 6px;
          border-width: 2px 2px 0 0;
          border-color: #C8C8CD;
          border-style: solid;
          -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          position: relative;
          top: -2px;
          position: absolute;
          top: 50%;
          margin-top: 6px;
          right: 2px;
        }
    }
  }
}
.nuim-btn-area{
  margin:20px 15px 5px;
  .nuim-btn{
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    line-height: 45px;
    border-radius: 5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    background-color: #FF9900;
  }
  .nuim-btn-disabled{
    background-color: #CCCCCC;
    color: #FFFFFF;
  }
}
.tips{
  font-size: 12px;
  color: #999999;
  letter-spacing: 0;
  line-height: 20px;
  padding: 12px 15px;
  li{
    list-style: none;
  }
}
.hotelinfo{
  padding-top: 5px;
  font-size: 12px;
  color: #999999;
  p{
    line-height: 18px;
  }
}
</style>
<style>
.weui-cells.vux-no-group-title{
  margin-top: 0.7em;
  overflow: unset;
}
label.weui-label{
  color: #999999;
  width: 85px;
  font-size: 14px;
}
input.weui-input{
  font-size: 14px;
  color: #333333;
  float: left;
  height: 1.75em;
}
.index .weui-cell:before{
  left: 0;
}
.weui-cell.needBz{
  align-items: flex-start;

}
</style>
